.container {
    width: 750px;
    min-height: 100vh;
    padding: 0 0 12vh  0;
}

.user {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 750px;
    height: 310px; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('//net.huanmusic.com/gasha/my/%E7%9F%A9%E5%BD%A2786.png');
}

.module {
    position: relative;
    margin-top: 10px;
}

.module::after {
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

.cover {
    width: 120px;
    height: 120px;
    border-radius: 75px;
    border: 4px solid #ffffff;
}

.status {
    float: left;
    width: 350px;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 34px;
    color: #ffffff;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000
}


.vip {
    position: relative;
    margin-top: 10px;
}

.vipIcon {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 59px;
    height: 58px;
    left: -28px;
    top: -10px;
}

.progress {
    display: block;
    padding: 0 30px;
    min-width: 130px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-size: 24px;
    color: #ffffff;
    border-radius: 30px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    background: #b2585a;
}

.sex {
    float: left;
    display: block;
    margin: 12px 0 0 10px;
    width: 28px;
    height: 28px;
}

.user, .menuItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.gift {
    position: absolute;
    left: 30px;
    top: 30px; 
}

.giftIcon {
    float: left;
    display: block;
    width: 40px;
    height: 47px;
    background-image: url('//net.huanmusic.com/gasha/my/%E7%A4%BC%E5%8C%85%E5%85%91%E6%8D%A2.png');
}

.gift > span {
    display: block;   
    margin-left: 5px;
    line-height: 50px;
    font-size: 28px;
    color: #ffffff;
    float: left;
}

.recharge {
    width: 116px;
    height: 54px;
    display: block;
    position: absolute;
    right: 30px;
    top: 30px;
    background-image: url('//net.huanmusic.com/gasha/my/%E5%85%85%E5%80%BC.png');
}

.giftIcon, .recharge, .setIcon {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.set {
    width: 750px;
    padding: 10px 0;
    background: #f6f6f6;
}

.setItem {
    width: 750px;
    height: 90px;
    line-height: 90px;
    font-size: 28px;
    background: #ffffff;
    border-bottom: 2px solid #dddddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.setIcon {
    width: 30px;
    height: 30px;
    display: block;
    margin-left: 30px;
}

.setText {
    margin-left: 10px;
    font-size: 28px;
}

.menu, .utils {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.menu {
    width: 750px;
    height: 170px;
    border-bottom: 2px solid #dddddd;
}

.utils {
    width: 750px;
    height: 160px;
    margin-top: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
}

.data {
    width: 750px;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.dataItem {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

.dataItem > span {
    text-align: center;
    font-size: 30px;
    color: #999999;
}

.dataBanner {
    width: 750px;
    height: 85px;
    line-height: 85px;
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    background: #f9f0e2;
}

.money {
    width: 750px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20px 30px 0 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.moneyText {
    display: block;
    font-size: 28px;
    color: #fea270;
}

.moneyText > span {
    font-size: 48px;
    margin-right: 5px;
}